<!DOCTYPE html>
<html>

<head>
    <title>基本选择器</title>
    <link rel="stylesheet" href="../../css/style.css" />

    <style>
        div.max{
            margin-top: 100px;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>

    <script>
        $(function(){
            $("#btn1").click(function(){
                // alert("修改one的颜色");
                // 根据id进行选择
                $("#one").css("background-color","red");
            });

            $("#btn2").click(function(){
                // alert("修改one的颜色");
                // 选择所有为mini的标签
                $(".mini").css("background-color","red");
            });

            $("#btn3").click(function(){
                // alert("修改one的颜色");
                // 根据名称选择
                $("div").css("background-color","red");
            });

            $("#btn4").click(function(){
                // alert("修改one的颜色");
                // 选择所有
                $("*").css("background-color","red");
            });

            $("#btn5").click(function(){
                // alert("修改one的颜色");
                // 选择two标签下的所有的mini标签
                $("#two,.mini").css("background-color","red");
            });
        });

    </script>

</head>

<body>
    <input type="button" id="btn1" value="选择one的元素" />
    <input type="button" id="btn2" value="选择样式为mini的元素" />
    <input type="button" id="btn3" value="选择所有的div元素" />
    <input type="button" id="btn4" value="选择所有元素" />
    <input type="button" id="btn5" value="选择id为two并且样式为mini的元素" />
    <hr />

    <div id="one">
        <div class="mini">111</div>
    </div>
    <div id="two">
        <div class="mini">222</div>
        <div class="mini">333</div>
        <div class="max">999</div>
    </div>
    <div id="three">
        <div class="mini">444</div>
        <div class="mini">555</div>
        <div class="mini">666</div>
    </div>
    <span id="four"></span>
</body>

</html>